<template>
  <div class="order-content" style="height: calc(100vh - 120rpx)">
    <ScrollList :finished="isFinished" :loading="isLoading" :show-empty="isFinished && !list?.length" style="height: calc(100vh - 120rpx); width: calc(100vw - 32rpx)" @load="load" @refresh="reset">
      <div class="" style="display: flex; flex-direction: column; gap: 16rpx">
        <template v-for="product in list" :key="product?.id">
          <div class="order-item">
            <div class="user-time">
              <div class="user-cover">
                <img alt="用户头像" class="user-avatar" :src="product.payUserInfo?.avatar" />
                <div class="name">{{ product.payUserInfo?.nickname }}</div>
              </div>
              <div class="time">{{ product.kTime }}</div>
            </div>
            <div class="product-detail">
              <view class="product-image-content">
                <image :src="product?.image" class="product-image" mode="aspectFill" />
              </view>

              <view class="product-info">
                <text class="truncate product-title">{{ product?.storeName }}</text>
                <text class="truncate product-profile">{{ product?.storeInfo }}</text>
                <view class="product-meta">
                  <text class="product-price">合计{{ product?.payPrice }}</text>
                  <text class="product-sales"> | 单件 {{ Number.parseInt(product?.payPrice / product.totalNum || 0, 2) }}</text>
                </view>
              </view>
            </div>
          </div>
        </template>
      </div>
    </ScrollList>
  </div>
</template>

<script setup lang="ts">
import ScrollList from '@/components/scroll-list/scroll-list.vue';
import { usePagination } from '@/hooks/usePagination';
import { orderDesignList } from '@/api/designUser';
import { onMounted } from 'vue';

const { list, isLoading, load, reset, isFinished } = usePagination(queryProducts);
function queryProducts(page = 1) {
  const data = {
    page: page,
    type: -1,
    productId: 18,
  };
  return orderDesignList(data);
}

onMounted(() => {
  reset();
});
</script>

<style scoped lang="scss">
.order-content {
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 16rpx;
}
.order-item {
  height: 242rpx;
  padding: 28rpx 22rpx;
  border-bottom: 1rpx solid #e4e4e4;
  .user-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user-cover {
      display: flex;
      align-items: center;
      gap: 12rpx;
      .user-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
      }
      .name {
        font-weight: bold;
        font-size: 24rpx;
        color: #222222;
        line-height: 34rpx;
      }
    }
    .time {
      width: 86rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #6f6f6f;
      line-height: 32rpx;
    }
  }
  .product-detail {
    display: flex;
    gap: 32rpx;
    margin: 12rpx 0 0;
    .product-image-content {
      .product-image {
        width: 134rpx;
        height: 134rpx;
      }
    }
  }
}
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 16rpx;

  .product-title {
    display: block;
    width: 100%;
    height: 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #222222;
    line-height: 32rpx;
  }

  .product-profile {
    font-weight: 400;
    font-size: 24rpx;
    color: #6f6f6f;
    line-height: 32rpx;
    text-align: left;
    margin: 8rpx 0 12rpx;
  }

  .product-meta {
    display: flex;
    align-items: center;
    margin: 8rpx 0 0;
    gap: 8rpx;
    font-weight: bold;
    font-size: 24rpx;
    color: #f25a27;
    line-height: 28rpx;
    .product-price {
      height: 38rpx;
      font-weight: bold;
      font-size: 28rpx;
      text-align: left;
    }

    .product-sales {
      font-weight: 400;
      font-size: 20rpx;
      color: #666666;
    }
  }
}
</style>
